<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NFT详情 - 音乐NFT平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="flex h-screen bg-gray-100">
        <!-- 侧边栏 (与首页相同) -->
        
        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 (与首页相同) -->
            
            <!-- 滚动内容区 -->
            <main class="flex-1 overflow-y-auto bg-gray-100">
                <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 左侧：NFT图片和音频播放器 -->
                        <div>
                            <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" alt="NFT Cover" class="w-full rounded-lg shadow-md mb-4">
                            <div class="bg-white rounded-lg shadow-md p-4">
                                <audio controls class="w-full mb-2">
                                    <source src="path_to_audio_file.mp3" type="audio/mpeg">
                                    您的浏览器不支持音频元素。
                                </audio>
                                <p class="text-sm text-gray-600 text-center">点击播放来欣赏这首AI生成的音乐</p>
                            </div>
                        </div>
                        
                        <!-- 右侧：NFT详情和购买按钮 -->
                        <div>
                            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                                <h1 class="text-3xl font-bold mb-2">电子音乐集Vol.1</h1>
                                <p class="text-gray-600 mb-4">由 DJ Electro 创作</p>
                                <div class="flex justify-between items-center mb-4">
                                    <span class="text-2xl font-bold text-pink-600">0.05 ETH</span>
                                    <button class="bg-pink-600 text-white px-6 py-2 rounded-full hover:bg-pink-700 transition duration-300">
                                        购买 NFT
                                    </button>
                                </div>
                                <div class="text-sm text-gray-600">
                                    <p><strong>创建日期：</strong> 2023年8月1日</p>
                                    <p><strong>音乐风格：</strong> 电子音乐</p>
                                    <p><strong>版本：</strong> #42 / 100</p>
                                </div>
                            </div>
                            
                            <!-- 交易历史 -->
                            <div class="bg-white rounded-lg shadow-md p-6 mb-6">
                                <h2 class="text-xl font-semibold mb-4">交易历史</h2>
                                <div class="space-y-3">
                                    <div class="flex justify-between items-center">
                                        <span>售出</span>
                                        <span class="text-gray-600">0.05 ETH</span>
                                        <span class="text-sm text-gray-500">2023/8/10</span>
                                    </div>
                                    <div class="flex justify-between items-center">
                                        <span>创建</span>
                                        <span class="text-gray-600">-</span>
                                        <span class="text-sm text-gray-500">2023/8/1</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 评论系统 -->
                    <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                        <h2 class="text-xl font-semibold mb-4">评论</h2>
                        <div class="space-y-4 mb-4">
                            <!-- 评论项 -->
                            <div class="flex space-x-3">
                                <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="User Avatar" class="w-10 h-10 rounded-full">
                                <div>
                                    <p class="font-semibold">音乐爱好者</p>
                                    <p class="text-gray-600">这是一个很棒的NFT!音乐太棒了!</p>
                                    <p class="text-sm text-gray-500">2023年8月5日</p>
                                </div>
                            </div>
                            <!-- 可以添加更多评论 -->
                        </div>
                        <div class="flex space-x-2">
                            <input type="text" placeholder="添加评论..." class="flex-grow px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-pink-500">
                            <button class="bg-pink-600 text-white px-4 py-2 rounded-md hover:bg-pink-700 transition duration-300">
                                发送
                            </button>
                        </div>
                    </div>
                </div>
            </main>
            
            <!-- 底部播放器 (与首页相同) -->
        </div>
    </div>
</body>
</html>
